<!--
 * @Version: 1.0
 * @Date: 2021-04-30 12:27:05
 * @LastEditTime: 2021-08-16 14:48:11
 * @Description:
-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-divider content-position="left">
        <h3>商品配置</h3>
      </el-divider>
      <!-- <el-form-item label="额外税税率" :label-width="width" style="width: 600px" prop="product.additional_tax_rate">
        <el-input v-model="form.product.additional_tax_rate" placeholder="额外税税率" autocomplete="off" clearable>
          <span slot="append">%</span>
        </el-input>
      </el-form-item> -->
      <el-form-item label="基准价系数" :label-width="width" prop="product.benchmark_price_coefficient">
        <el-input v-model="form.product.benchmark_price_coefficient" placeholder="基准价系数" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="厘米转英寸" :label-width="width" prop="product.cm_to_in">
        <el-input v-model="form.product.cm_to_in" placeholder="厘米转英寸" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="公斤转磅" :label-width="width" prop="product.kg_to_pt">
        <el-input v-model="form.product.kg_to_pt" placeholder="公斤转磅" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="基础价格与采购价格系数" :label-width="width" prop="product.price_factor">
        <el-input v-model="form.product.price_factor" placeholder="基础价格与采购价格系数" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="基础价格与采购价格系数usd" :label-width="width" prop="product.price_factor_usd">
        <el-input v-model="form.product.price_factor_usd" placeholder="基础价格与采购价格系数usd" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="海运价" :label-width="width" prop="product.shipping_price">
        <el-input v-model="form.product.shipping_price" placeholder="海运价" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="仓储费比例" :label-width="width" prop="product.storage_fee_ratio">
        <el-input v-model="form.product.storage_fee_ratio" placeholder="仓储费比例" autocomplete="off" clearable />
      </el-form-item>
      <!-- <el-form-item label="关税杂费税率" :label-width="width" prop="product.tariff_rate">
        <el-input v-model="form.product.tariff_rate" placeholder="关税杂费税率" autocomplete="off" clearable>
          <span slot="append">%</span>
        </el-input>
      </el-form-item> -->
      <el-form-item label="体积系数" :label-width="width" prop="product.volume_factor">
        <el-input v-model="form.product.volume_factor" placeholder="体积系数" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="高峰附加费" :label-width="width" prop="product.peak_surcharge">
        <el-input v-model="form.product.peak_surcharge" placeholder="高峰附加费" autocomplete="off" clearable />
      </el-form-item>
      <el-form-item label="燃油系数" :label-width="width" prop="product.fuel_ratio">
        <el-input v-model="form.product.fuel_ratio" placeholder="燃油系数" autocomplete="off" clearable>
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <div class="tac">
        <span v-action="'config@save'">
          <el-button v-loading="loaddingBut" :disabled="loaddingBut" type="primary" @click="submit">保存</el-button>
        </span>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'Product',
  directives: {
    action
  },
  data() {
    return {
      width: '180px',
      loaddingBut: false,
      // 站点信息
      form: {
        product: {
          price_factor: '',
          shipping_price: '',
          tariff_rate: '',
          additional_tax_rate: '',
          storage_fee_ratio: '',
          benchmark_price_coefficient: '',
          price_factor_usd: '',
          volume_factor: '',
          kg_to_pt: '',
          cm_to_in: '',
          peak_surcharge: '',
          fuel_ratio: ''

        },
        parent: 'product'
      },
      // 规则
      rules: {
        'product.fuel_ratio': [
          { required: true, message: '请输入燃油系数', trigger: 'blur' }
        ],
        'product.peak_surcharge': [
          { required: true, message: '请输入高峰附加费', trigger: 'blur' }
        ],
        'product.additional_tax_rate': [
          { required: true, message: '请输入额外税税率', trigger: 'blur' }
        ],
        'product.benchmark_price_coefficient': [
          { required: true, message: '请输入额外税税率', trigger: 'blur' }
        ],
        'product.cm_to_in': [
          { required: true, message: '请输入厘米转英寸', trigger: 'blur' }
        ],
        'product.kg_to_pt': [
          { required: true, message: '请输入公斤转磅', trigger: 'blur' }
        ],
        'product.price_factor': [
          { required: true, message: '请输入基础价格与采购价格系数', trigger: 'blur' }
        ],
        'product.price_factor_usd': [
          { required: true, message: '请输入基础价格与采购价格系数usd', trigger: 'blur' }
        ],
        'product.shipping_price': [
          { required: true, message: '请输入海运价', trigger: 'blur' }
        ],
        'product.storage_fee_ratio': [
          { required: true, message: '请输入仓储费比例', trigger: 'blur' }
        ],
        'product.tariff_rate': [
          { required: true, message: '请输入关税杂费税率', trigger: 'blur' }
        ],
        'product.volume_factor': [
          { required: true, message: '请输入体积系数', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.$http.get('/config/product').then(response => {
      const upload = response.data
      Object.keys(upload).forEach(k => {
        Object.keys(upload[k]).forEach(key => {
          this.form[k][key] = upload[k][key]
        })
      })
    })
  },
  methods: {
    submit() {
      const vm = this
      vm.$refs['form'].validate(valid => {
        if (valid) {
          vm.loaddingBut = true
          vm.$http.post('config', vm.form).then(response => {
            vm.$message.success('修改成功')
            vm.loaddingBut = false
            vm.updateProductPrice()
          })
        } else {
          console.log(valid)
        }
      })
    },
    // 批量修改商品基准价
    updateProductPrice() {
      const vm = this
      vm.$confirm('是否生成相关商品基准价?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        const params = {
          type: 1
        }
        vm.$http.post('/productPrice/updateProductPrice', params).then(() => {
          vm.$message.success('生成成功')
        })
      })
    }
  }
}
</script>

<style scoped>
.el-form .el-form-item {
  width: 600px;
}
</style>
